<template>
      <div id="dialog_box">
            <el-dialog
            :title="DialogData.title"
            :visible.sync="DialogData.show"
            width="50%"
            >
                  <div class="form_box">
                        <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                              <el-form-item label="分类ID" prop="pass" v-if="!DialogData.add">
                                    <el-input type="text" v-model.number="FormData.id" disabled ></el-input>
                              </el-form-item>
                              <el-form-item label="所属分类" prop="pass">
                                    <el-select v-model="FormData.pid" placeholder="请选择">
                                          <el-option
                                                v-for="item in selectData"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                          </el-option>
                                    </el-select>
                              </el-form-item>
                              <el-form-item label="分类名称" prop="pass">
                                    <el-input type="text" v-model="FormData.name" maxlength="30"></el-input>
                              </el-form-item>
                              <el-form-item label="分类图片" prop="checkPass" v-if="DialogData.add">
                                    <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    multiple
                                    ref="upload"
                                    :auto-upload="false"
                                    :on-change="onChange"
                                    :on-success="Cancel"
                                    :limit="limit"
                                    >
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                          <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                              </el-form-item>
                              <!-- 缩略图 -->
                              <el-form-item label="分类图片" v-if="!DialogData.add">
                                    <div class="imgBox">
                                          <!-- <div class="imgitem" v-for="(item, index) in slt" :key="index"> -->
                                                <img :src="FormData.navpic" v-if="FormData.type != 1" alt="" width="148" height="148" style="margin-right:20px">
                                          <!-- </div> -->
                                          <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    multiple
                                    ref="uploads"
                                    :auto-upload="false"
                                    :on-change="onChange"
                                    :on-success="Cancel"
                                    :limit="limit"
                                    >
                                    <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                          <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    </div>
                              </el-form-item>
                              
                              <el-form-item label="分类描述" prop="age">
                                    <el-input type="textarea" :rows="3" v-model="FormData.describe"></el-input>
                              </el-form-item>
                        </el-form>
                  </div>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="escape">取 消</el-button>
                        <el-button type="primary" @click="SubForm" v-if="DialogData.add">确 定</el-button>
                        <el-button type="success" @click="EditForm" v-else>确 定</el-button>
                  </span>
            </el-dialog>
      </div>
</template>

<script>
      export default {
            props: {
                  DialogData: Object,
                  FormData: Object,
                  selectData: Array,
            },
            data() {
                  return {
                        dialogImageUrl: '',
                        dialogVisible: false,
                        limit: 1,
                        images: [],
                        slt: [],
                  }
            },
            computed: {
                  goodsid() {
                        return this.FormData.id 
                  }
            },
            
            methods: {
                  async SubForm() {
                        let { pid,  id, name, describe, navpic } = this.FormData
                        if (!name) {
                             this.$message.success("请输入商品名称") 
                             return false;
                        } 
                        else if(!navpic) {
                              this.$message.success("请上传分类图片") 
                             return false;
                        } 
                         else if(!describe) {
                              this.$message.success("请输入分类说明") 
                             return false;
                        } else {
                              let token = localStorage.miniToken
                              this.FormData.token = token
                              let fd = new FormData()
                              fd.append("name", name)
                              fd.append("pid", pid)
                              fd.append("describe", describe)
                              fd.append("token", token)
                              fd.append("navpic", navpic)
                              // if (navpic) {
                              //       fd.append("navpic", navpic)
                              // }
                              if (!this.DialogData.add) {
                                    fd.append("id", id)
                              }
                              
                              let res = await this.$axios.post("/admin/website/navinsert", fd )
                              //console.log(res);
                              let code = res.data.code
                              if(code == 200 || code == 202 || code == 204) {
                                    this.$message.success('保存成功!')
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    this.$refs.upload.clearFiles()
                                    this.$refs.uploads.clearFiles()
                              } else {
                                    this.$message.error("网络连接超时,请重试!")
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    
                              }
                              
                        }
                  },
                  // 编辑分类
                  async EditForm() {
                        let { id, pid , name , describe , type, navpic } = this.FormData
                        let fd = new FormData() 
                        let data = {}
                        if (type) {
                              fd.append("token",localStorage.miniToken)
                              fd.append("id", id)
                              fd.append("name", name)
                              fd.append("describe", describe)
                              fd.append("type", type)
                              fd.append("navpic", navpic)
                              fd.append("pid", pid)
                              let res = await this.$axios.post("/admin/website/navchange", fd)
                              //console.log(res);
                              let code = res.data.code
                              if(code == 200 || code == 202 || code == 204) {
                                    this.$message.success('保存成功!')
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    this.$refs.upload.clearFiles()
                                    this.$refs.uploads.clearFiles()
                              } else {
                                    this.$message.error("网络连接超时,请重试!")
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    
                              }
                        } else {
                              data = {
                                    id,
                                    pid,
                                    name,
                                    describe,
                                    type:"2",
                                    token:localStorage.miniToken
                              }
                              let res = await this.$axios.post("/admin/website/navchange", data)
                              let code = res.data.code
                              if(code == 200 || code == 202 || code == 204) {
                                    this.$message.success('保存成功!')
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    this.$refs.upload.clearFiles()
                                    this.$refs.uploads.clearFiles()
                              } else {
                                    this.$message.error("网络连接超时,请重试!")
                                    this.DialogData.show = false
                                    this.$emit("update")
                                    this.$router.go(0)
                                    
                              }
                        }
                        
                        
                  },
                  onChange( file) {
                        if(this.DialogData.add) {
                              this.FormData.navpic = file.raw
                        } else {
                              this.FormData.type = "1"
                              this.FormData.navpic = file.raw
                        }
                  },
                  
                  // 上传成功,删除文件
                  Cancel() {
                        this.dialogImageUrl = ""
                        this.DialogData.show = false
                        this.$refs.upload.clearFiles()
                        this.$refs.uploads.clearFiles()
                        this.$router.go(0)
                        
                  },
                  // 点击取消
                  escape() {
                        this.$router.go(0)  
                  }
            },
      }
</script>

<style lang="scss" scoped>
.el-form-item {
      text-align: left;
}
.imgBox {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      box-sizing: border-box;
      .imgitem {
            width: 20%;
            img {
                  width: 148px;
                  height: 148px;
            }
      }
}

</style>